<template>
  <div class="page">
    <div class="task-list">
      <div class="option-box">
        <span class="box-item">
          <span class="label">执行任务名称：</span>
          <span class="text">我是一个任务的名称</span>
        </span>
      </div>
      <div class="task-header">
        <a-row>
          <a-col :span="24">
            <a-row :gutter="16">
              <a-col :span="4">
                <a-form-item>
                  <a-input
                    v-model:value="formState.name"
                    placeholder="支持按照指标名称模糊搜索指标"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="执行状态">
                  <a-select v-model:value="formState.state" :options="options"> </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
      <div class="option-box">
        <a-button style="margin-left: 10px" type="primary">批量下载</a-button>
        <a-button>批量删除</a-button>
      </div>
      <div class="task-table">
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="data"
        >
          <template #index="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #startTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #endTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #state="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #createTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #updateTime="{ text }">
            <span>{{ text }}</span>
          </template>

          <template #active="{ record }">
            <span>
              <a-popconfirm
                title="确定删除当前这个指标?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDelete(record)"
                @cancel="cancelDelete"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, toRefs } from "vue";
import { SelectTypes } from "ant-design-vue/es/select";
import { useRouter } from "vue-router";
import { Moment } from "moment";
import { TableDataType, Key } from "@/shims/globe";
import { EXECUTE_STATE_ENUM, generationOptions } from "@/utils/enums";
import { columns } from "./config";

export default defineComponent({
  setup() {
    const router = useRouter();
    const stateOptions = generationOptions(EXECUTE_STATE_ENUM, "code");
    const options = ref<SelectTypes["options"]>([...stateOptions]);
    const dates = ref<Moment[]>([]);
    const value = ref<Moment[]>();
    const formState = reactive({
      name: "",
      state: "1"
    });
    const disabledDate = (current: Moment) => {
      if (!dates.value || dates.value.length === 0) {
        return false;
      }
      const diffDate = current.diff(dates.value[0], "days");
      return Math.abs(diffDate) > 7;
    };

    const onOpenChange = (open: boolean) => {
      if (open) {
        dates.value = [];
      }
    };

    const onChange = (val: Moment[]) => {
      value.value = val;
    };

    const onCalendarChange = (val: Moment[]) => {
      dates.value = val;
    };

    const data: TableDataType[] = [
      {
        key: "1",
        name: "当天店铺会员规模",
        indexValue: "1222",
        startTime: "2021-08-30 18:11:34",
        endTime: "2021-08-30 18:11:34",
        state: "执行成功",
        createTime: "2021-08-30 18:11:34",
        updateTime: "2021-08-30 18:11:34"
      },
      {
        key: "2",
        name: "会员溢价",
        indexValue: "1222",
        startTime: "2021-08-30 18:11:34",
        endTime: "2021-08-30 18:11:34",
        state: "执行中",
        createTime: "2021-08-30 18:11:34",
        updateTime: "2021-08-30 18:11:34"
      },
      {
        key: "3",
        name: "老会员",
        indexValue: "1222",
        startTime: "2021-08-30 18:11:34",
        endTime: "2021-08-30 18:11:34",
        state: "执行失败",
        createTime: "2021-08-30 18:11:34",
        updateTime: "2021-08-30 18:11:34"
      }
    ];
    const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    const start = () => {
      state.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };
    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    const confirmDelete = (record: any) => {
      console.log(record);
    };
    const cancelDelete = (record: any) => {
      console.log(record);
    };
    return {
      formState,
      dates,
      value,
      options,
      disabledDate,
      onOpenChange,
      onChange,
      onCalendarChange,
      data,
      columns,
      hasSelected,
      ...toRefs(state),
      start,
      onSelectChange,
      confirmDelete,
      cancelDelete
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
